@use "sass:color";
@import "../../../../style/pc/red/theme";
@import "../../../../style/pc/red/tippy-theme-widget";
.lms-DatePicker{
	display:inline-flex;
	align-items:center;
	width:100%;
	height:$-form-widget-height;
	background:#fff;
	border:1px solid $-border-color;
	transition:$-form-widget-transition;
	transition-property:border-color,box-shadow;
	cursor:pointer;
	&.lms--square{
		border-radius:$-form-widget-border-radius;
	}
	&.lms--round{
		border-radius:$-form-widget-height / 2;
		padding:0 3px;
	}
	&.lms--noBorder{
		border:0;
		background:transparent;
		&.lms--focus{
			box-shadow:none;
		}
	}
	&:hover,&:focus{
		border-color:$-primary-color;
		outline:0;
	}
	&.lms--focus{
		border-color:$-primary-color;
		box-shadow:$-form-widget-box-shadow;
	}
	&.lms--value:not(.lexmis--disable){
		&:hover{
			>.lms-DatePicker_icon{
				display:none;
			}
			>.lms-DatePicker_clear{
				display:flex;
			}
		}
	}
	&.lexmis--disable{
		border-color:$-border-color;
		background:$-disable-color;
		cursor:not-allowed;
		.lexmis-Icon{
			cursor:not-allowed;
		}
	}
	>.lms-DatePicker_content{
		height:100%;
		width:100%;
		outline:0;
		border:0;
		background:none;
		font-size:$-content-font-size;
		padding:0 0 0 $-mini-gap;
		color:$-title-color;
		z-index:1;
		cursor:pointer;
		&::placeholder{
			color:$-sub-color;
		}
	}
	>.lms-DatePicker_icon,>.lms-DatePicker_clear{
		flex-shrink:0;
		margin:0 $-mini-gap;
		font-size:18px;
	}
	>.lms-DatePicker_clear{
		display:none;
	}
}
.lms-DatePicker_Tippy{
	width:100%;
	vertical-align:middle;
}
.tippy-box[data-theme~='lexmis-widget']{
	.lms-DatePicker_TippyContent{
		$cell-size:24px;
		$cell-gap:2px;
		color:$-sub-color;
		>.lms-DatePicker_head{
			height:32px;
			display:flex;
			align-items:center;
			border-bottom:1px solid $-border-color;
			padding:0 $-mini-gap;
		}
		.lms-DatePicker_body{
			width:($cell-size + $cell-gap * 2) * 7+10px * 2;
			height:($cell-size + $cell-gap * 2) * 7+10px * 2;
			padding:10px;
			display:flex;
			flex-wrap:wrap;
			align-content:flex-start;
			>div{
				margin:$cell-gap;
				width:$cell-size;
				height:$cell-size;
				display:flex;
				justify-content:center;
				align-items:center;
			}
		}
		.lms-DatePicker_day{
			position:relative;
			color:$-content-color;
			border-radius:3px;
			cursor:pointer;
			&:before{
				content:'';
				position:absolute;
				height:100%;
				width:calc(100% + #{$cell-gap * 2});
				left:-$cell-gap;
				top:0;
			}
			&:hover{
				background: color.scale($-primary-color,$alpha:-90%);
			}
			&.lms--nowDay{
				&:after{
					content:'';
					position:absolute;
					width:6px;
					height:6px;
					border-radius:50%;
					background:$-primary-color;
					top:1px;
					right:1px;
				}
			}
			&.lms--contain{
				background:transparent;
				&:before{
					background: color.scale($-primary-color,$alpha:-90%);
				}
			}
			&.lms--nextContain{
				background:transparent;
				&:before{
					border:1px solid $-primary-color;
					border-left:0;
					border-right:0;
				}
			}
			&.lms--active{
				color:#fff;
				background:$-primary-color;
				&:after{
					background:#fff;
				}
			}
			&.lms--nextFromActive{
				&:before{
					border:1px solid $-primary-color;
					border-right:0;
				}
			}
			&.lms--nextToActive{
				&:before{
					border:1px solid $-primary-color;
					border-left:0;
				}
			}
		}
		.lms-DatePicker_text{
			flex-grow:1;
			flex-basis:0;
			font-size:14px;
			color:$-title-color;
			text-align:center;
			>span{
				margin:0 5px;
				cursor:pointer;
				transition:color $-form-widget-transition;
				&:hover{
					color:$-primary-color;
				}
			}
		}
		.lms-DatePicker_navigate{
			flex-shrink:0;
			font-size:21px;
			cursor:pointer;
			transition:color $-form-widget-transition;
			&:hover{
				color:$-primary-color;
			}
		}
	}
}
